<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
#map {
        width: 100%;
        height: 90%;
        border: 0px;
        padding: 0px;
        position: relative;
     }
body {
        border: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
     }
    </style>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script type="text/javascript">
        <!--
        var map;
        var ctrlid = null;
        var hostingurl = "http://www.freesteel.co.uk/hackday";
        var hostingcgi = "http://www.freesteel.co.uk/cgi-bin/hackday";

        function onSuccess(transport)
        {
            alert(transport.responseText);
        }

        function onMouseMove(e)
        {
            var position = this.events.getMousePosition(e);
            OpenLayers.Util.getElement("coords").innerHTML = position; 
        }

        function onMapMoveEnd(e)
        {
            var geoproj = new OpenLayers.Projection("EPSG:4326");
            var mercproj = new OpenLayers.Projection("EPSG:900913");
            
            var extent = this.getExtent();
            var center = this.getCenter();
            //OpenLayers.Util.getElement("debug").innerHTML = "Centre: " + center + " Extent: " + extent; 
            updateMarkerLayers(center.clone().transform(mercproj, geoproj), extent.clone().transform(mercproj, geoproj));
        }


        function updateMarkerLayers(centerGEO, extentGEO)
        {
            //OpenLayers.Util.getElement("debug").innerHTML = "center in geo = " + centerGEO;
            // if we have a layerscontrol, clear it
            var c = map.getControl(ctrlid);
            if (c != null)
                c.clearLayersArray("data");

            // get the data for marking stuff
            var layers = new Array();
            layers[0] = "fixmystreet";
            layers[1] = "heritagelottery";
            for (i = 0; i < layers.length; ++i)
            {
                // remove layer with this name first
                var l = map.getLayersByName(layers[i]);
                for (j = 0; j < l.length; ++j)
                    map.removeLayer(l[j]);

                // get the points and add layer to map
                var url = hostingcgi + "/hackdaydb.py?format=merc&user=goatchurch";
                url += "&src=" + layers[i];
                url += "&lon=" + centerGEO.lon + "&lat=" + centerGEO.lat;
                var r = extentGEO.getWidth() / 2.0;
                url += "&radius=" + r;
                //OpenLayers.Util.getElement("debug").innerHTML += "<br>url = " + url;
                var newl = new OpenLayers.Layer.Text( layers[i], {location: url });
                map.addLayer(newl);
            }
            
            // if we haven't got one, add a layer control
            var c = map.getControl(ctrlid);
            if (c == null)
            {
                var ls = new OpenLayers.Control.LayerSwitcher();
                ctrlid = ls.id;
                map.addControl(ls);
            }

        }


        function init(){
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                      numZoomLevels: 19,
                      maxResolution: 156543.0399,
                      units: 'm',
                      projection: new OpenLayers.Projection("EPSG:900913"),
                      displayProjection: new OpenLayers.Projection("EPSG:4326")
                    });


            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
            var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");

            map.addLayers([layerMapnik,layerTah]);

            //var url = "http://www.freesteel.co.uk/hackday/textfile.txt";
            //var roptions = { method: 'get',  onSuccess: onSuccess };
            //var req = new OpenLayers.Ajax.Request(url, roptions);
            
            
            var ukcentre = new OpenLayers.LonLat(-2.534, 54);
            var home = new OpenLayers.LonLat(-3.0, 53.4); // Liverpool
            

            var geoproj = new OpenLayers.Projection("EPSG:4326");
            var mercproj = new OpenLayers.Projection("EPSG:900913");
            map.setCenter(ukcentre.clone().transform(geoproj, mercproj), 6);

            map.addControl(new OpenLayers.Control.MousePosition());
            map.events.register("mousemove", map, onMouseMove);
            map.events.register("moveend", map, onMapMoveEnd);
            
            var ext = map.getExtent();
            updateMarkerLayers(ukcentre, ext.clone().transform(mercproj, geoproj));
         }

        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
    <div id="coords"></div>
    <div id="debug"></div>
  </body>
</html>

